<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">

  <!-- 新 Bootstrap5 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

  <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
  <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

  <title>主页</title>
<style>

  .content{
    margin: 0 auto;
    width: 1000px;
  }
</style>

</head>
<body>

<div class="content">
  <div th:insert="~{common2 :: navbar}"></div>
  <a type="button" class="btn btn-primary" th:href="@{/article/add}">新增</a>

  <table class="table table-hover">
  <thead>
  <tr>
    <th>序号</th>
    <th>标题</th>
    <th>内容</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>

  <tr th:each="article:${articles}">

    <td th:text="${article.id}">John</td>
    <td th:text="${article.title}">Doe</td>
    <td th:text="${article.content}">john@example.com</td>

    <td>
      <a type="button" class="btn btn-warning"
         th:href="@{'/article/update/'+${article.id}}">修改</a>
      <a type="button" class="btn btn-danger"
         th:href="@{'/article/delete/'+${article.id}}">删除</a>
      <a type="button" class="btn btn-primary"
         th:href="@{'/article/content/'+${article.id}}">查询</a>
    </td>
  </tr>
  </tbody>
  </table>
  <div class="container mt-3">
    <ul class="pagination">

      <li th:each="i:${#numbers.sequence(1, totalPages)}" th:class="${page==i} ? 'page-item active' : 'page-item'">
        <a class="page-link" th:href="@{'/article/'+${i}}" th:text="${i}">1</a>
      </li>
    </ul>
  </div>
 </div>

    </body>
    </html>